<script setup lang="ts">
import { ref, onMounted,nextTick, watch, watchEffect, onUnmounted, h, computed } from 'vue'
import { TeamOutlined, QuestionCircleOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { useWebSocket } from '../stores/websocket'
import { wsUrl } from '../utils/config'
import { teachLiveDoing, teachMessageSend, teachLiveFinish, teachMessageMute, teachMessageUnmute, teachLiveTeach } from '../stores/api/live'
import { message } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';
import { useRouter } from "vue-router";
import { useCounterStore } from '../stores/counter'
import emoji from "../assets/emoji.json"
import { ImgUrlPrefix } from '../utils/config'
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';

const [modal] = Modal.useModal();
//表情转码  
// let emojis= "😃".codePointAt(0).toString(10)
// console.log(emojis);
const props:any = defineProps({
    // 触发滚动的容器
    isGain: {
      type: [String, Array],
      default: '',
    },
    liveInfo: {
        type: [String, Object],
        default: {},
    }
})
const {
  status,
  reconnectCount,
  receivedMessages,
  init,
  connect,
  disconnect,
  send,
  clearMessages
} = useWebSocket()
const videoPlayer = ref(null);
const messages = ref('')
const message_list = ref([]) // 聊天消息列表
const user_list = ref([]) // 观众列表
const info:any = ref({}) // 获取直播信息
const messageRef = ref(null);
const router:any = useRouter()
const muteTime:any = ref()
const muteTimeIndex:any = ref()
const emojiVisible = ref(false) // 表情是否显示
const time = ref(null) // 定时器
const count = ref(0)
const isOnline = ref(navigator.onLine); // 网络连接状态
const emojis:any = emoji
const labelCol = { span: 5 };
const wrapperCol = { span: 24 };

const player = ref(null)
const isShowAirtime = ref<Boolean>(true)
const store = useCounterStore()

// 用户信息
const getteachLiveInfo = () => {
    teachLiveTeach({}, 'post').then((res: any) => {
            console.log(res)
            if(res.code == 200) {
                count.value = res.data.count
                user_list.value = res.data.list
            } else {
                
            }
        }).catch((err: any) => {
            console.log(err)
        })
}
// 发送消息
const sendMsgs = () => {
    const name = JSON.parse(localStorage.getItem('userinfo') || '').name
    let obj = {
        "content": messages.value,
        "name": name
    }
    if (messages.value.trim()) {
        teachMessageSend(obj, 'post').then((res: any) => {
            console.log(res)
            if(res.code == 200) {
                message.success(res.message);
                messages.value = ''
            } else {
                
            }
        }).catch((err: any) => {
            console.log(err)
        })
    }
}
//  自动滚动到底部的功能
const scrollToBottom = () => {
  nextTick(() => {
    if (messageRef.value) {
          messageRef.value.scrollIntoView({
            behavior: "smooth",
            block: "end",
          });
        } else {
          console.warn("找不到 lastmessage，无法滚动。", messageRef.value);
        }
  });
};
// 使用正则表达式匹配中间的部分（支持换行符）
const extractMiddlePart = (str) => {
  const regex = /欢迎(.+)加入直播间/; // 使用 /s 修饰符支持换行符
  const match = str.match(regex);
  return match ? match[1] : '';
};
// 监听消息
watch(() => receivedMessages.value, (newVal:any, oldValue) => {
    console.log('监听数据变化',  newVal, oldValue)
    // const newArr = newVal
    // //     .filter(item => item.types == 10 || item.types == 11 || item.types == 9)
    // //     .map(item => ({ ...item, extra: true }));
    // //     console.log(newArr);
    // let arr = []
    // newArr.forEach(item => {
    //     if(item.types == 10 || item.types == 11 || item.types == 9){
    //         arr.push({
    //             content: item.content,
    //             type: item.type,
    //             types:item.types,
    //             userId: item.userId,
    //             name: item.name,
    //             timestamp: item.timestamp
    //         })
    //   }else if(item.types == 12){
    //         arr.push({
	// 			...item,
    //             name: '系统消息',
	// 			content: '直播暂时离开直播间'
    //         })
    //   }else if(item.types == 101){
    //         arr.push({
    //             ...item,
    //             name: '系统消息',
    //             content: '直播已结束'
    //         })
    //         // modal.confirm({
    //         //     title: '直播已结束,是否退出？',
    //         //     icon: h(ExclamationCircleOutlined),
    //         //     content: h('div', { style: 'color:red;' }, 'Some descriptions'),
    //         //     onOk() {
    //         //     console.log('OK');
    //         //     },
    //         //     onCancel() {
    //         //     console.log('Cancel');
    //         //     },
    //         //     class: 'test',
    //         // });
    //   }else if(item.types == 102){
    //        arr.push({
    //             ...item,
    //             name: '系统消息',
    //             content: '用户被直播间禁言'
    //         })
    //   }else if(item.types == 103){
    //         arr.push({
    //             ...item,
    //             name: '系统消息',
    //             content: '用户被直播间解除禁言'
    //         })
    //   }
    // })
    // message_list.value = arr
    // //   if(newVal.types == 9 && newVal.name == '系统消息') {
    // //     // user_list.value.reduce((acc, item) => {
    // //     //     if (!acc.includes(item)) {
    // //     //         acc.push(item);
    // //     //     }
    // //     //     return acc;
    // //     // }, [])
    // //     if(user_list.value.length > 0) {
    // //         // user_list.value.filter((item, index, self) =>{
    // //         //     if(item.userId != newVal.userId) {
    // //         //         user_list.value.push({
    // //         //             bizType: newVal.bizType,
    // //         //             content: newVal.content,
    // //         //             id: newVal.id,
    // //         //             remindLevel:newVal.remindLevel,
    // //         //             senderId: newVal.senderId,
    // //         //             type: newVal.type,
    // //         //             types:newVal.types,
    // //         //             userId: newVal.userId,
    // //         //             name: extractMiddlePart(newVal.content),
    // //         //             roomId: newVal.roomId
    // //         //         })
    // //         //     }
    // //         // })
    // //     } else {
    // //         // user_list.value.push({
    // //         //     bizType: newVal.bizType,
    // //         //     content: newVal.content,
    // //         //     id: newVal.id,
    // //         //     remindLevel:newVal.remindLevel,
    // //         //     senderId: newVal.senderId,
    // //         //     type: newVal.type,
    // //         //     types:newVal.types,
    // //         //     userId: newVal.userId,
    // //         //     name: extractMiddlePart(newVal.content),
    // //         //     roomId: newVal.roomId
    // //         // })
    // //     }
    // //     console.log('user_list.value',user_list.value)
    // //   }
    //   scrollToBottom()
    },{ immediate: true }
);
watchEffect(() => {
    console.log('userWebsocket.webSocket',receivedMessages.value)
    const newArr:any = receivedMessages.value
    //     .filter(item => item.types == 10 || item.types == 11 || item.types == 9)
    //     .map(item => ({ ...item, extra: true }));
    //     console.log(newArr);
    let arr = []
    newArr.forEach(item => {
        if(item.types == 10 || item.types == 11 || item.types == 9){
            arr.push({
                content: item.content,
                type: item.type,
                types:item.types,
                userId: item.userId,
                name: item.name,
                timestamp: item.timestamp
            })
      }else if(item.types == 12){
            arr.push({
				...item,
                name: '系统消息',
				content: '直播暂时离开直播间'
            })
      }else if(item.types == 101){
            arr.push({
                ...item,
                name: '系统消息',
                content: '直播已结束'
            })
            // modal.confirm({
            //     title: '直播已结束,是否退出？',
            //     icon: h(ExclamationCircleOutlined),
            //     content: h('div', { style: 'color:red;' }, 'Some descriptions'),
            //     onOk() {
            //     console.log('OK');
            //     },
            //     onCancel() {
            //     console.log('Cancel');
            //     },
            //     class: 'test',
            // });
      }else if(item.types == 102){
           arr.push({
                ...item,
                name: '系统消息',
                content: '用户被直播间禁言'
            })
      }else if(item.types == 103){
            arr.push({
                ...item,
                name: '系统消息',
                content: '用户被直播间解除禁言'
            })
      }
    })
    message_list.value = arr
    scrollToBottom()
})
// 获取正在直播直播间
const getLiveInfo = () => {
    player.value = null
    teachLiveDoing({}, 'post').then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            info.value = res.data
            if(res.data.url) {
                  // player-container-id 为播放器容器 ID，必须与 html 中一致
                let val = res.data.url.substring(res.data.url.lastIndexOf('/'))
                console.log(val,isShowAirtime.value,'val')
                if(times.value <= 0 || !isShowAirtime.value) {
                    console.log(isShowAirtime.value,'isShowAirtime')
                    player.value = TCPlayer('player-container-id', {
                        sources: [{
                        src: res.data.url, // 播放地址
                        }],
                        // m3u8: res.data.url, // 替换为你的直播流地址
                        autoplay: true,
                        poster: getImgUrl(res.data.thumbnail), // 可选，封面图片地址
                        // width: 640,
                        // height: 480,
                        // wording: {
                        //     2032: "请求视频失败，请检查网络",
                        //     2048: "请求 m3u8 文件失败，可能是网络错误或者跨域问题"
                        // }
                        licenseUrl: 'license/url', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
                    });
                    player.value.on('error', function(error) {
                        // 做一些处理
                        console.log('error错误',error)
                    });
                }
            }
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

// 结束直播
const handleLive = () => {
    teachLiveFinish({}, 'post').then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            message.success(res.message);
            clearMessages() // 清除聊天消息
            router.push({path: '/'})
        }
    }).catch((err: any) => {
        console.log(err)
    })
}

// 切换时间
const handleTime = (val:any) => {
    // muteTime.value = val
    muteTimeIndex.value = val
    if(val == 1) {
        muteTime.value = 1 * 60 * 60
    } else if(val == 2) {
        muteTime.value = 2 * 60 * 60
    } else if(val == 3) {
        muteTime.value = 3 * 60 * 60
    }else if(val == 4) {
        muteTime.value = ''
    }
}
// 禁言
const confirm = (userId:any) => {  
    if(muteTimeIndex.value != 4) {
        //禁止发音
        if(muteTime.value){
            teachMessageMute({ userId, muteTime: muteTime.value }, 'post').then((res: any) => {
                console.log(res)
                if (res.code == 200) {
                    message.success(res.message);
                }
            }).catch((err: any) => {
                console.log(err)
            })
        } else {
            message.error('请选择时间');
        }
    } else {
        // 解除发言
        teachMessageUnmute({ userId }, 'post').then((res: any) => {
            console.log(res)
            if (res.code == 200) {
                message.success(res.message);
            }
        }).catch((err: any) => {
            console.log(err)
        })
    }
};

const cancel = () => {
  message.error('取消');
};

// 表情列表是否显示

const handleChang = (item:any) => {
    emojiVisible.value = false;
    messages.value = messages.value + item.emoji
};

// 重新连接websocket
const handleReconnect = () => {
    nextTick(() => {
        const token = localStorage.getItem('token')
        init({
          url: `${wsUrl}?token=${token}&types=T`, // 替换为实际的WebSocket服务地址
          reconnectDelay: 2000,
          maxReconnectCount: 10,
          pingInterval: 30000,
          pingMessage: { type: 'ping', payload: '' }
        })
    })
}

const updateNetworkStatus = () => {
  isOnline.value = navigator.onLine;
  if ((window.navigator as any).connection) {
    console.log((window.navigator as any).connection)
  }
};

// 图片地址拼接
const getImgUrl = (val) => {
    const url = ImgUrlPrefix(val)
    return url
}

const times = computed(() => {
    const date = Date.now();
    if(info.value.status_at && info.value.status_at != 0) {
        let time = info.value.status_at * 1000 - date
        console.log('time', time)
        if(time < 0) {
            return time
        } else {
            return info.value.status_at * 1000
        }
    } else {

        return 0
    }
})
const onFinish = () => {
    console.log('完成')
    isShowAirtime.value = false
    getLiveInfo()
}
onMounted(() => {
  // 确保视频加载完成后自动播放
//   videoPlayer.value.muted = true; // 静音视频，避免自动播放时的声音干扰
//   videoPlayer.value.play().catch(error => {
//       console.error('Video auto-play failed:', error);
//   });
  getLiveInfo()
  getteachLiveInfo()
  time.value = setInterval(() => {
    getteachLiveInfo() // 用户信息
  }, 60000)
  console.log(props.isGain,status.value, '234234234')
  if(status.value != 'CONNECTED' && status.value != 'CONNECTING') {
    nextTick(() => {
        const token = localStorage.getItem('token')
        init({
          url: `${wsUrl}?token=${token}&types=T`, // 替换为实际的WebSocket服务地址
          reconnectDelay: 2000,
          maxReconnectCount: 10,
          pingInterval: 30000,
          pingMessage: { type: 'ping', payload: 'keep-alive' }
        })
        connect();
    })
  }
  console.log(props.liveInfo,'直播信息')
  console.log(navigator.onLine,'网络状态')
  window.addEventListener('online', updateNetworkStatus);
  window.addEventListener('offline', updateNetworkStatus);
  if ((window.navigator as any).connection) {
    (window.navigator as any).connection.addEventListener('change', updateNetworkStatus);
  }
  updateNetworkStatus(); // 初始化状态
});
onUnmounted(() => {
    clearInterval(time.value)
    time.value = null
    window.removeEventListener('online', updateNetworkStatus);
    window.removeEventListener('offline', updateNetworkStatus);
    if ((window.navigator as any).connection) {
        (window.navigator as any).connection.removeEventListener('change', updateNetworkStatus);
    }
    if (player.value) {
        player.value.dispose(); // 假设TCPlayer有dispose方法
    }
})
</script>

<template>
  <a-page-header
    style="background-color: rgba(22,24,35,1);height: 63px;padding: 10px 24px;"
    title=""
    sub-title="''"
    class="header-box"
    @back="() => $router.go(-1)"
  />
  <!-- {{ receivedMessages }} -->
  <div class="live-room">
    <div class="live-left">
        <a-card  class="basic-card">
            <div class="basic-info">
                <img class="cover-img" :src="getImgUrl(info.thumbnail)" alt="">
                <div style="flex:1">
                    <div style="display: flex;align-items: flex-start;justify-content: space-between;">
                        <div class="input-item-dd">{{info.title}}</div>
                    </div>
                    <div class="type-item">
                        <div class="time-item-s">
                            <span>状态：</span>
                            <a-tag color="green" v-if="info.status == 10">直播中</a-tag>
                            <a-tag color="blue" v-else-if="info.status == 20">未直播</a-tag>
                            <a-tag color="purple" v-else-if="info.status == 30">直播中断</a-tag>
                            <a-tag color="cyan" v-else-if="info.status == 40">直播预告</a-tag>
                            <span v-else>--</span>
                        </div>
                        <div class="time-item-s">
                            <span>权限：</span>
                            <a-tag color="green" v-if="info.permission == 10">所有人</a-tag>
                            <a-tag color="cyan" v-else-if="info.permission == 20">会员</a-tag>
                            <span v-else>--</span>
                        </div>
                        <div class="time-item-s"><span>时间：</span>{{store.timestampChangDate(info.last_time * 1000)}}</div>
                        <div class="time-item-s">
                            <span>网络状态：</span>
                            <a-button type="primary" class="btn-ss" v-if="!isOnline"><a-tag color="red">离线</a-tag></a-button>
                            <span v-else><a-tag color="green">在线</a-tag></span>
                        </div>
                        <!-- <div class="time-item-s">
                            <span>消息连接：</span>
                            <a-button type="primary" class="btn-ss" @click="handleReconnect" v-if="!store.setConnected">失败</a-button>
                            <span v-else>成功</span>
                        </div> -->
                    </div>
                </div>
            </div>
        </a-card>
        <!-- <video
            src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
            ref="videoPlayer"
            loop
            autoplay
            class="live-video"
        ></video> -->
        <div class="live-item-top">
            <div class="time-item" v-if="times > 0 && isShowAirtime">
                <div>开播倒计时</div>
                <a-statistic-countdown :value="times" style="margin-right: 50px" @finish="onFinish" :style="{'margin-right': 0}" :valueStyle="{color: '#f50','marginRight': 0}">
                </a-statistic-countdown>
            </div>
            <video v-else id="player-container-id" class="live-video" height="270" preload="auto" playsinline webkit-playsinline></video>
        </div>
        <div class="positin-boottom">
            <div class="bottom-item-a">
                <!-- <SoundOutlined :style="{fontSize: '22px'}" /> -->
                <div style="font-size: 22px"> </div>
                <a-button type="primary" class="btn-ss" @click="handleLive">结束直播</a-button>
            </div>
        </div>
    </div>
    <div class="live-right">
        <div class="live-right-list">
            <div class="live-num"><TeamOutlined  :style="{fontSize: '22px'}"/>  在线观众 {{count}}</div>
            <div class="live-item" v-for="(item, index) in user_list" :key="index">
                <div class="ranking">{{item.id}}</div>
                <!-- <img class="img-avatar" src="https://p3.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-i-0813_13ce6c70ca764c209048c2790eea0d3c.jpeg?from=3067671334" alt=""> -->
                <div class="nick-name">{{item.nick_name}}</div>
            </div>
        </div>
        <div class="live-message">
            <div class="msg-list" ref="messageRef">
                <div class="msg-item" v-for="(item, index) in message_list" :key="index">
                    <div>
                        <a-popconfirm ok-text="确定" cancel-text="取消" @confirm="confirm(item.userId)" @cancel="cancel" v-if="item.types == 11 && item.name != '系统消息'">
                            <template #title>
                                <p>是否禁止/解除当前用户发言？</p>
                                <p>
                                    <span :class="['time-ss', muteTimeIndex == 1 ? 'time-active' : '']"  @click="handleTime(1)">1小时</span>
                                    <span :class="['time-ss', muteTimeIndex == 2 ? 'time-active' : '']"  @click="handleTime(2)">2小时</span>
                                    <span :class="['time-ss', muteTimeIndex == 3 ? 'time-active' : '']" @click="handleTime(3)">3小时</span>
                                    <span :class="['time-ss', muteTimeIndex == 4 ? 'time-active' : '']" @click="handleTime(4)">解除发言</span>
                                </p>
                            </template>
                            <template #icon><question-circle-outlined style="color: red" /></template>
                            <span class="name">{{item.name}}：</span>
                        </a-popconfirm>
                        <span class="name" v-else-if="item.types == 9">{{ item.name }}：</span>
                        <span class="name" v-else><a-tag class="tag-xx" color="#fa3534" v-if="item.types == 10">主播</a-tag>{{item.name}}：</span>
                        <span class="msg-content">{{item.content}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-contt">
            <div class="bottom-send">
               <a-textarea v-model:value="messages" class="send-input" placeholder="与大家互动一下..."  auto-size  @keydown.enter="sendMsgs"/>
                <a-popover v-model:open="emojiVisible" title="表情" trigger="click">
                    <template #content>
                        <div class="emoji-box">
                            <div v-for="item in emojis" class="emoji-item" @click="handleChang(item)">
                                <span style='font-size:18px;cursor:pointer'>{{item.emoji}}</span>
                            </div>
                        </div>
                    </template>
                    <SmileOutlined :style="{fontSize: '22px',marginRight: '10px'}"/>
                </a-popover>
                <!-- <ArrowUpOutlined :style="{fontSize: '22px'}" @click="sendMsgs" /> -->
                <a-button type="primary" class="btn-ss" @click="sendMsgs">发送</a-button>
            </div>
        </div>
    </div>
  </div>
</template>

<style scoped>
.live-room{
   display: flex;
   color: #333;
   background-color: rgba(22,24,35,1) ; /* rgba(22,24,35,1)*/
   padding-top: 7px;
}
.live-left{
   flex: 3;
   height: 93vh;
   position: relative;
   overflow: hidden;
   padding:0 15px 15px 15px;
}
.live-video{
  width: 100%;
  height: 70vh;
  object-fit: cover; /* 确保视频撑满父容器 */
  border-radius: 5px;
}
.basic-card{
    background-color: rgb(51,52,63);
    border: none;
    margin-bottom: 10px;
}
.basic-info{
    display: flex;
    color: #999;
    padding-bottom: 6px;
}
.cover-img{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #e6e8eb;
    object-fit: cover;
}
.input-item-dd{
    width:100px;
    height: 30px;
    padding-top: 0;
    background-color: transparent;
    font-size: 16px; /* 占位符字体大小 */ 
    border:none;
    outline: none;
    color: #fff;
    margin-top: 7px;
    margin-left: 20px;
}
.time-item-s{
    /* height: 30px; */
    padding-top: 0;
    background-color: transparent;
    color: #fff;
    margin-top: 7px;
    margin-right: 60px;
}
.type-item{
  padding-left:20px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.type-s{
    display: inline-block;
    padding: 5px 15px;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer;
}
.active{
    background-color: rgb(51,52,63);
}

.positin-boottom{
    position: absolute;
    bottom: 10px;
    width: 97%;
}
.bottom-item-a{
    width:100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
   background-color: rgb(51,52,63);/*# 080808*/
   padding: 8px 15px;
   border-radius: 10px;
}
.btn-ss{
    background-color: #fe5d26;
    height: 34px;
}
.btn-ss:hover{
    background-color: #fe5d26;
}

.live-right{
    color: #fff;
   flex:1;
   position:relative;
   /* background-color: rgb(37,38,50); */
   padding-right: 10px;
}
.live-right-list{
    background-color: rgb(51,52,63); /* rgb(51,52,63)*/
    color:#fff;
    padding: 10px 20px;
    height: 22vh;
    border-radius: 10px;
    overflow-y: auto;
}
.live-item{
   display: flex;
   align-items: center;
   margin-top: 20px;
   font-size: 14px;
}
.live-num{
    line-height: 30px;
    margin-bottom: 20px;
}
.ranking{
    margin-right: 30px;
    min-width: 50px;
}
.nick-name{
    margin:0 20px 0 10px;
}
.img-avatar{
    width: 35px;
    height: 35px;
    border-radius: 50%;
}
.grade{
    width: 30px;
}

.live-message{
    padding: 10px 20px;
    /* background-color: rgb(37,38,50); */
    height: 62.5vh;
    background-color: rgb(51,52,63); /* rgb(51,52,63)*/
    border-radius: 10px;
    margin-top: 15px;
    overflow-y: auto;
}
.msg-item{
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    font-size: 14px;
}
.time-ss{
    margin-right: 3px;
    line-height: 30px;
    padding: 3px 7px;
    color: #333;
    border-radius: 5px;
}
.time-active{
    background-color: rgb(51,52,63);
    color: #fff;
}
.msg-grade{
    width: 40px;
}
.tag-xx{
    border-radius: 36px;
    font-size: 12px;
    padding: 0px 10px;
}
.name{
 color: #8ce7ff;
 margin:0 10px 0 0;
}
.msg-content{
    line-height: 25px;
    font-size: 14px;
}
.bottom-contt{
    position: absolute;
    bottom: 0;
    width: 100%;
    /* background-color: rgb(37,38,50); */
}
.bottom-send{
    display: flex;
    align-items: center;
    color: #fff;
    background-color: rgb(51,52,63);
    margin: 10px 10px 10px 0;
    padding: 8px 8px 8px 0;
    border-radius: 10px;
}
.send-input{
    background-color: rgb(51,52,63);
    font-size: 16px; /* 占位符字体大小 */
    border:none;
    box-shadow: none;
    outline: none;
    color: #fff;
}
.send-input::placeholder {
  font-size: 14px; /* 占位符字体大小 */
  color: #fff; /* 占位符字体颜色 */
}
.read-the-docs {
  color: #888;
}
.emoji-box{
    display: flex;
    flex-wrap: wrap;
    max-width:400px;
}
.emoji-item{
    margin-right: 10px;
    margin-bottom: 5px;
}
.live-item-top{
    position: relative;
    height: 70vh;
}
.time-item{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    text-align: center;
    color:  #f50;
    padding-top: 24vh;
    line-height: 48px;
    font-size: 18px;
}
</style>